<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar :border-bottom="false" title-size="36" title="评价"></u-navbar>
        <u-gap height="20"></u-gap>
        <view class="comment-top">
          <view class="count dis-flex">
            <text class="count-l star">{{ (count * 10 * 0.1).toFixed(1) }}</text>
            <u-rate
              class="count-r"
              disabled
              v-model="count"
              active-color="#FBC258"
              inactive-color="#CCCCCC"
              size="36"
              gutter="10"
            ></u-rate>
          </view>
          <view class="count dis-flex">
            <text class="count-l des">商家评分</text>
            <view class="count-r dis-flex" v-if="commentCount">
              <view class="type" :class="commentType == 0 ? 'checked' : ''" @click="onChangeType(0)"
                >全部{{ commentCount.allCount }}</view
              >
              <view class="type" :class="commentType == 1 ? 'checked' : ''" @click="onChangeType(1)"
                >好评{{ commentCount.positiveCount }}</view
              >
              <view class="type" :class="commentType == 3 ? 'checked' : ''" @click="onChangeType(3)"
                >差评{{ commentCount.negativeCount }}</view
              >
              <view class="type" :class="commentType == 4 ? 'checked' : ''" @click="onChangeType(4)"
                >有图{{ commentCount.hasPictureCount }}</view
              >
            </view>
          </view>
        </view>
        <u-gap height="20"></u-gap>
      </view>
      <view class="comment-area">
        <view class="comment-box" @click="routeTo" v-for="(item, index) in itemList" :key="index">
          <view class="comment-info dis-flex flex-y-center">
            <u-avatar style="margin-right: 10rpx" src="" size="70"></u-avatar>
            <view class="info-left-username">
              <view class="name">用户</view>
              <view class="date">2024-01-05</view>
            </view>
          </view>
          <view class="comment-star dis-flex">
            <view class="">
              <u-rate
                v-model="item.scores"
                disabled
                active-color="#FBC258"
                inactive-color="#CCCCCC"
                size="31"
                gutter="10"
              ></u-rate>
            </view>
            <text class="comment-star-text" v-if="item.scores == 5">非常满意</text>
            <text class="comment-star-text" v-if="item.scores == 4">满意</text>
            <text class="comment-star-text" v-if="item.scores == 3">一般</text>
            <text class="comment-star-text" v-if="item.scores == 2">不满意</text>
            <text class="comment-star-text" v-if="item.scores == 1">非常不满意</text>
          </view>
          <view class="">
            <view class="comment-content dis-flex flex-wrap">
              <text v-if="item.spuName" style="color: #0f76bc">@{{ item.spuName }}</text>
              <text
                v-if="item.skuProperties && item.skuProperties.length > 0"
                style="color: #0f76bc"
                >#{{ item.skuProperties[0].valueName }}
              </text>
              <text v-if="item.content" style="margin-left: 10rpx">{{ item.content }}</text>
            </view>
            <view class="comment-img" v-if="item.picUrls && item.picUrls.length > 0">
              <view class="image" v-for="(pic, i) in item.picUrls" :key="i">
                <u-image
                  :src="pic"
                  mode=""
                  border-radius="8"
                  width="216rpx"
                  height="145rpx"
                ></u-image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      count: 5,
      itemList: [],
      shopId: null,
      commentType: 0,
      commentCount: null
    }
  },
  onLoad(e) {
    this.shopId = e.shopId || '1866398011704389634'
    this.count = e.count
    this.getcount()
    this.queryList()
  },
  methods: {
    getcount() {
      this.$u.get('/app-api/trade/order/comment/get-count', { shopId: this.shopId }).then((res) => {
        this.commentCount = res.data
      })
    },
    onChangeType(type) {
      this.commentType = type
      this.queryList()
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/product/comment/page', {
          type: this.commentType,
          shopId: this.shopId,
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style lang="scss">
.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.comment-area {
  position: relative;
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;

  .comment-info {
    overflow: auto;
    margin: 15rpx 0;

    .comment-info-left {
    }

    .info-left-username {
      .name {
        font-size: 24rpx;
        color: #333333;
      }

      .date {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .comment-star {
    display: flex;
    align-items: center;

    .comment-star-text {
      font-size: 24rpx;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .comment-content {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #333333;
    line-height: 36rpx;
  }

  .comment-img {
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .image {
      margin-top: 10rpx;
    }
  }
}
</style>
